<template>
  <maincontainer>
    <mycard>
      <n-form
        ref="formRef"
        :label-width="80"
        label-placement="left"
        :model="formValue"
      >
        <n-grid x-gap="12" :cols="4">
          <n-gi>
            <n-form-item label="姓名:" path="name">
              <n-input v-model:value="formValue.name" placeholder="输入姓名" />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="姓名:" path="name">
              <n-input v-model:value="formValue.name" placeholder="输入姓名" />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="姓名:" path="name">
              <n-input v-model:value="formValue.name" placeholder="输入姓名" />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-button @click="search">查询</n-button>
            <n-button @click="resetForm">重置</n-button>
            <n-button @click="create">新建</n-button>
          </n-gi>
        </n-grid>
      </n-form>
    </mycard>
    <mycard class="flex-1 h-full">
      <flextable :column="column" :tabledata="tableData"></flextable>
    </mycard>
    <mycard class="w-full h-8 juzhong1">
      <fenye :total="total" @change="gettabledatafunc" ref="fenyeref"  class="juzhong1"></fenye>
    </mycard>
    <Edit ref="editref"/>
  </maincontainer>
</template>

<script setup name="Meetroom" lang="ts">
import { useRoute, useRouter } from 'vue-router'
import guilingfunc from "../../../util/guiling";
import {NButton,} from "naive-ui";
import Edit from "./modal.vue"
import {DefineComponent, h,inject,ref} from "vue"
const router = useRouter()
const route = useRoute()
const formRef =ref(null)
const fenyeref=ref(null)
const editref=ref(null)
const formValue = ref({})
const column = ref([
   {
    title: "序号", key: "index",width:60,align:"center", show: true, render: (rowData:any, rowIndex:number) => {
      return rowIndex + 1
    }
  },
  {title: "栏目名称", key: "name", show: true},
  {title: "创建时间", key: "createdTime", show: true,render: (rowData:any, rowIndex:number)=>{
      return new Date().toMyString(rowData["createdTime"])
    }},
  {title: "更新时间", key: "changeTime", show: true,render: (rowData:any, rowIndex:number)=>{
      return new Date().toMyString(rowData["changeTime"])
    }},
  {title: "下属栏目", key: "childrenlanmu", show: true},
  {title: "下属博客", key: "blogcontent", show: true},
  {
    title: "查看", key: "view", width: 80, align:"center",show: true, render: (rowData:any, rowIndex:number) => {
      return h(NButton, {onClick: ()=>{handleView(rowData)},size:"small"}, {
        default() {
          return "查看"
        }
      })
    }
  },
  {
    title: "编辑", key: "view", width: 80,align:"center", show: true, render: (rowData:any, rowIndex:number) => {
      return h(NButton, {onClick: ()=>{handleEdit(rowData)},size:"small"}, {
        default() {
          return "编辑"
        }
      })
    }
  },
  {
    title: "删除", key: "view", width: 80,align:"center", show: true, render: (rowData:any, rowIndex:number) => {
      return h(NButton, {onClick: ()=>{handleDelete(rowData)},size:"small"}, {
        default() {
          return "删除"
        }
      })
    }
  },
])
const tableData = ref([])
const total = ref(0)

// 向后台获取数据
const gettabledatafunc=()=>{}

const handleView = (data:any)=>{
  editref.value!.init("view",{...data})
}
const handleEdit = (data:any)=>{
 editref.value!.init("edit",{...data})
}
// 点击删除
let delDialog:Function = inject("delDialog")
const handleDelete = (data:any)=>{

}


// 点击查询
const search=()=>{}
// 点击重置
const resetForm=()=>{
  formValue.value = guilingfunc(formValue.value)
}
// 点击新建
const create=()=>{
  editref.value!.init("add",{})
}

const zhucefunc:Function|undefined = inject("zhuceshuaxinfunc")
// 初始化函数
const init = () => {
  fenyeref.value && fenyeref.value.changeoption({page:1})
}

// 初始化区域
init()
zhucefunc && zhucefunc({[route.name!.toString()]:init})
</script>


<style scoped>
</style>
